<head>
<meta charset="UTF-8">
<title>后台管理系统</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="{:Config('__PUBLIC__')}/element/css/index.css">
<script src="{:Config('__PUBLIC__')}/vue/dist/vue.min.js"></script>
<script src="{:Config('__PUBLIC__')}/element/lib/index.js"></script>
<script type="text/javascript" src="{:Config('__PUBLIC__')}/layui/layui.js"></script>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="{:Config('__PUBLIC__')}/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="{:Config('__PUBLIC__')}/css/admin_main_index.css">
<style type="text/css">
  v-cloak{display: none;}
  #main{display: none;}
  .backendload{position: absolute; width: 100%;height: 100%;text-align: center;line-height: 100%;background: black;top: 0px;left: 0px;z-index: 9999999;}
  .backendload img{position: relative; top:50%;margin-top: -300px;}
  .tag-box .el-tag {
    padding: 4px 8px;
  }
  .el-tag{height: 30px;margin-right: 3px;}
</style>
</head>
<body>
<div class="backendload"><img src="/static/images/backend_load.gif"></div>
<div id="main">
  <el-row class="nav">
    <el-col :span="4">
      <div class="logo"><i class="el-icon-document"></i>管理后台</div>
    </el-col>
    <el-col :span="20">
      <el-menu theme="dark" :default-active="activeIndex" class="el-menu" mode="horizontal" @select="handleSelect">
        <el-submenu index="2">
          <template slot="title">{$username}</template>
          <el-menu-item index="2-1" v-on:click="handleSkipUrl('{:Url('/admin/backend_user/user')}','个人设置',-1)">个人设置</el-menu-item>
          <el-menu-item index="2-2" v-on:click="handleSkipUrl('{:Url('/admin/config/index')}','站点设置',-2)">站点设置</el-menu-item>
          <el-menu-item index="2" v-on:click="exit()">
          退出
          </el-menu-item>
        </el-submenu>

        <el-menu-item index="4" v-on:click="reload()">
          <a href="javascript:;">刷新页面</a>
        </el-menu-item>
        
        <el-menu-item index="3" v-on:click="skipBlog()">
          <a href="javascript:;">访问博客</a>
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="4" class="left-menu" :style="{minHeight: leftheight + 'px' }">
      <div class="grid-content bg-purple-dark">
        <el-row class="tac">
          <el-col :span="24">
            <el-menu class="el-menu-vertical-demo">
              {$menu}
            </el-menu>
          </el-col>
        </el-row>
      </div>
    </el-col>
    <el-col :span="20" class="page-content" :style="{height: height + 'px' }">
      <div class="tag-box">
        <el-tag
          v-for="(tag,key) in windows"
          :key="key"
          :closable="true"
          :type ="tag.type"
          @close="handleClose(tag.tagid)">
          <a href="javascript:;" v-on:click="tagClick(tag)">{{tag.tagname}}</a>
        </el-tag>
      </div>
      <div class="iframe-box">
        <iframe class="main-iframe" v-for="(tag,key) in windows" :id="'main-iframe-'+tag.tagid" v-if="tag.isset == true" v-show="tag.selected == true" :src="tag.src" ></iframe>
      </div>
    </el-col>
  </el-row>
</div>
</body>
<script type="text/javascript">
layui.use(['layer']);
</script>
<!-- 先引入 Vue -->
<script type="text/javascript">
var Main = {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        height: (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) - 90,
        leftheight: (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) - 60,
        default_main_src: "{:Url('content')}",
        windows: [
          {tagid:0,tagname:'首页',src:"{:Url('content')}",type:'primary',selected:true,isset:true},
        ],
        main_src: "{:Url('content')}",
        tags: [],

      };
    },
    created: function(){

    },
    methods: {
      exit(){
        window.location.href="{:Url('backend_user/logout')}";
      },
      reload(){
        for (var i in this.windows) {
          if(this.windows[i].selected == true){
            var url = this.windows[i].src;
            document.getElementById('main-iframe-'+this.windows[i].tagid).src = url;
          }
        }
      },
      handleSkipUrl(src,name,tagid){
        var type = "primary";
        var is_add = false;
        for (var i in this.windows) {
          this.windows[i].type = "gray";
          this.windows[i].selected = false;
          if(this.windows[i].tagid == tagid){
            is_add = true;
            this.windows[i].selected = true;
            this.windows[i].type = "primary";
          }
        }
        if(!is_add){
          this.windows.push({tagid:tagid,tagname:name,src:src,type:type,selected:true,isset:true});
        }
      },
      handleClose(tagid) {
        if(tagid == 0){
          return;
        }
        var tag_length = this.tags.length;
        for (var i in this.windows) {
          if(this.windows[i].tagid == tagid){
            if(this.windows[i].selected == false){
              this.windows.splice(i, 1);
              console.log(i);
              return;
            }else{
              this.windows[this.windows.length -2].selected = true;
              this.windows[this.windows.length -2].type = "primary";
              this.windows.splice(i, 1);
              return;
            }
          }
        }
      },
      tagClick(tag){
        console.log( tag.tagid );
        for (var i in this.windows) {
          this.windows[i].type = "gray";
          this.windows[i].selected = false;
          if(this.windows[i].tagid == tag.tagid){
            this.windows[i].type = "primary";
            this.windows[i].selected = true;
          }
        }
      },
      handleSelect(key, keyPath) {
        // console.log(key, keyPath);
      },
      skipBlog(){
        window.open("http://blog.fy1994.cn");
      }
    },
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#main')

//加载完成
window.onload=function(){
  $("#main").css("display","block");
  $(".backendload").fadeOut("slow",function(){
    $(".backendload").remove();
  });
};

// window.onresize = function () {
//   document.location.reload();
// }
</script>